<template>
  <div class="coming-soon">
    <div class="banner">
      <h1>即将上映</h1>
      <p>抢先了解最新即将上映的影片</p>
    </div>

    <div class="movie-list" v-loading="loading">
      <el-empty v-if="movies.length === 0 && !loading" description="暂无即将上映的电影信息">
        <el-button type="primary" @click="fetchMovies">刷新</el-button>
      </el-empty>

      <div v-else class="movies-container">
        <el-card
          v-for="movie in movies"
          :key="movie.id"
          class="movie-card"
          shadow="hover"
        >
          <router-link :to="{ name: 'MovieDetail', params: { id: movie.id } }" class="movie-link">
            <div class="movie-info">
              <h3 class="movie-title">{{ movie.title }}</h3>
              <p class="movie-director">导演: {{ movie.director || '未知' }}</p>
              <p v-if="movie.releaseDate" class="movie-release-date">上映日期: {{ movie.releaseDate }}</p>
            </div>
          </router-link>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElIcon } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import axiosInstance from '../utils/axiosInstance'

interface Movie {
  id: number;
  title: string;
  director?: string;
  actors?: string;
  genre?: string;
  releaseDate?: string;
  duration?: number;
  description?: string;
  status?: string;
}

const movies = ref<Movie[]>([])
const loading = ref(false)
const error = ref<string | null>(null)

const fetchMovies = async () => {
  loading.value = true
  error.value = null
  try {
    // 获取状态为"即将上映"的电影
    const response = await axiosInstance.get<Movie[]>('/movies', { 
      params: { status: '即将上映' }
    })
    
    movies.value = response.data
  } catch (err: any) {
    console.error("Failed to fetch coming soon movies:", err)
    error.value = "加载即将上映电影列表失败"
    ElMessage.error('加载即将上映电影列表失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchMovies()
})
</script>

<style scoped>
.coming-soon {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  /* background: linear-gradient(to right, #2E7D32, #4CAF50); */
  background: rgba(46, 125, 50, 0.8); /* Semi-transparent green */
  color: white;
  padding: 40px 20px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 30px;
}

.banner h1 {
  margin-bottom: 10px;
}

.movie-list {
  min-height: 300px;
}

.movies-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.movie-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
  border-radius: 8px; /* Add border-radius if not already present */
}

.movie-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.movie-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.movie-info {
  padding: 15px;
}

.movie-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-director, .movie-release-date {
  font-size: 0.9rem;
  color: #606266;
  margin-bottom: 3px;
}

.movie-release-date {
  color: #2E7D32;
  font-weight: bold;
}
</style> 